<template>
  <Swiper
    :direction="props.basic.direction"
    :speed="props.basic.speed"
    :auto-height="props.basic.autoHeight"
    :round-lengths="props.basic.roundLengths"
    :preloadImages="props.basic.preloadImages"
    :loop="props.loop"
    :slides-per-view="props.carousel.slidesPerView"
    :centered-slides="props.carousel.centeredSlides"
    :space-between="props.carousel.spaceBetween"
    :autoplay="props.autoplay"
    :effect="props.effects.effect"
    :modules="[Controller, Pagination, Navigation, Autoplay, A11y, EffectCoverflow]"
    :pagination="{ clickable: true }"
  >
    <template v-for="item in list" :key="item">
      <SwiperSlide>
        <var-image radius="10" :src="item.bannerUrl"></var-image>
      </SwiperSlide>
    </template>
  </Swiper>
</template>

<script setup lang="ts">
import { Controller, Pagination, Navigation, Autoplay, A11y, EffectCoverflow } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/autoplay'
import 'swiper/css/controller'
import 'swiper/css/effect-coverflow'
interface IProps {
  list: any[]
  basic?: {
    direction?: 'horizontal' | 'vertical' //滑动方向
    speed?: number //切换速度
    roundLengths?: boolean //将slide的宽和高取整
    autoHeight?: boolean //wrapper 和container 会随着当前slide 的高度而发生变化。
    preloadImages?: boolean
  }
  carousel?: {
    slidesPerView?: number //设置slider容器能够同时显示的slides数量(carousel模式)。
    centeredSlides?: boolean //居中幻灯片。设定为true时，当前的active slide 会居中，而不是默认状态下的居左。
    spaceBetween?: number //在slide之间设置距离（单位px）
  }
  loop?: boolean //是否无限循环,

  //组件属性
  autoplay?: {
    autoplay?: boolean //自动切换
    delay: number
    pauseOnMouseEnter: boolean //鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。 如果你还开启了disableOnInteraction，那么自动切换不会恢复。
  }
  effects?: {
    effect: 'fade' | 'cube' | 'coverflow' | 'flip' | 'cards' | 'creative'
  }
}

const props = withDefaults(defineProps<IProps>(), {
  list: () => [],
  basic: () => {
    return {
      direction: 'horizontal',
      speed: 300,
      roundLengths: true,
      autoHeight: true,
      preloadImages: true
    }
  },
  loop: true,
  carousel: () => {
    return {
      slidesPerView: 1.5,
      centeredSlides: true,
      spaceBetween: 0
    }
  },
  effects: () => {
    return {
      effect: 'coverflow'
    }
  }
})
</script>

<style scoped lang="less">
.swiper {
  margin-top: 50px;
}
</style>
